<template>
  <div id="app">
    <div class="content-container">
      <Header v-if="$route.name !== 'Login' && $route.name !== '403' && $route.name !== '404'" class="header-container" />
      <div :class="['main-container', {'no-header': $route.name === 'Login' || $route.name === '403' || $route.name === '404'}]">
        <router-view />
      </div>
      <div v-if="$route.name !== 'Login' && $route.name !== '403' && $route.name !== '404'" class="footer-container">{{version}}</div>
    </div>
  </div>
</template>
<script>
  import { config } from "./axios/index";
  import Header from "./components/header"
  export default {
    name: 'App',
    components: {
      Header
    },
    data() {
      return {
        version: config.version
      }
    },
    mounted() {
      // 系统title设置
      document.title = config.documentTitle;
    }
  }
</script>

<style lang="scss">
  .content-container {
    width: 100%;
    height: 100%;
    .header-container {
      width: 100%;
      height: 56px;
      line-height: 56px;
    }
    .main-container {
      width: 100%;
      height: calc(100% - 86px);
      padding: 0 16px;
      background: #F0F2F5;
    }
    .main-container.no-header {
      height: 100%;
    }
    .footer-container {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #949BA4;
    }
  }
</style>
